<template>
  <!--登录界面-->
  <div class="login_register-dialog-shade">
    <div class="login_register-dialog-box">
      <!-- 关闭按钮 -->
      <i class="iconfont icon-guanbi login_register-dialog-close-btn" @click="closeLoginDia"></i>
      <!-- 内容主体 -->
      <div class="login_register-dialog-content">
        <div class="login_register-box">
          <!--标题-->
          <div class="login_register-title-box">
            <div class="title-text-box">登录</div>
          </div>
          <!-- 主体 -->
          <div class="login_register-content-box">
            <!-- 登录 -->
            <div>
              <form data-vv-scope="login_form" class="login_register-form-box">
                <div class="form-item">
                  <div class="form-input-box">
                    <input
                      type="text"
                      name="userName"
                      placeholder="请输入账号"
                      class="form-input"
                      aria-required="true"
                      aria-invalid="false"
                      v-model="userName"
                    />
                  </div>
                  <span class="form-item__error" style="display: none;"></span>
                </div>
                <div class="form-item">
                  <div class="form-input-box">
                    <input
                      type="password"
                      name="password"
                      data-vv-as="密码"
                      placeholder="请输入6-16位数字和字母组成的密码"
                      class="form-input"
                      aria-required="true"
                      aria-invalid="false"
                      v-model="password"
                    />
                  </div>
                  <span class="form-item__error" style="display: none;"></span>
                </div>
                <div class="form-btn-box">
                  <button type="button" class="primary-linear dialog-button" @click="login">
                    <!---->
                    <span>登录</span>
                  </button>
                </div>
                <div class="form-bottom-box">
                  <label class="el-checkbox auto-login-btn">
                    <span class="el-checkbox__input">
                      <span class="el-checkbox__inner"></span>
                      <input
                        type="checkbox"
                        aria-hidden="false"
                        class="el-checkbox__original"
                        value
                      />
                    </span>
                    <span class="el-checkbox__label">
                      自动登录
                      <!---->
                    </span>
                  </label>
                  <span class="split-symbol"></span>
                  <span class="forget-password-btn pointer">忘记密码</span>
                  <span class="font-14 f-r go-register-btn pointer">没有账号,前往注册</span>
                </div>
              </form>
            </div>

            <!-- 注册 -->
            <div style="display: none;">
              <form data-vv-scope="regist_form" class="login_register-form-box">
                <label style="display: none;">
                  <input type="text" name="user1" />
                </label>
                <label style="display: none;">
                  <input type="password" name="hidden2" />
                </label>
                <div class="form-item">
                  <div class="form-input-box">
                    <input
                      type="text"
                      name="user"
                      maxlength="11"
                      data-vv-as="手机号"
                      data-vv-validate-on="change"
                      placeholder="请输入手机号"
                      class="form-input"
                      aria-required="true"
                      aria-invalid="false"
                    />
                  </div>
                  <span class="form-item__error" style="display: none;"></span>
                  <!---->
                </div>
                <div class="form-item form-item-img_code clearfix">
                  <div class="form-input-box f-l">
                    <input
                      type="text"
                      name="imgValidateCode"
                      data-vv-as="图形动态码"
                      placeholder="请输入右侧图片计算的结果"
                      class="form-input"
                      aria-required="true"
                      aria-invalid="false"
                    />
                  </div>
                  <div class="common-img-box img-code-box pointer f-r">
                    <img src="http://tch.ityxb.com/back/bxg_anon/common/vcode?t=1599426472994" />
                  </div>
                  <span class="form-item__error" style="display: none;"></span>
                  <!---->
                </div>
                <div class="form-item form-item-auth_code">
                  <div class="form-input-box f-l">
                    <input
                      type="text"
                      name="ckCode"
                      maxlength="6"
                      data-vv-as="验证码"
                      placeholder="请输入有效的6位验证码"
                      class="form-input"
                      aria-required="true"
                      aria-invalid="false"
                    />
                  </div>
                  <div class="get-auth_code-box f-r">
                    <button
                      type="button"
                      class="el-button common-count_down-btn el-button--text el-button--small"
                    >
                      <!---->
                      <!---->
                      <span>获取验证码</span>
                    </button>
                  </div>
                  <span class="form-item__error" style="display: none;"></span>
                </div>
                <div class="form-item">
                  <div class="form-input-box">
                    <input
                      type="password"
                      name="password"
                      data-vv-as="密码"
                      placeholder="请输入6-16位数字和字母组成的密码"
                      class="form-input"
                      aria-required="true"
                      aria-invalid="false"
                    />
                  </div>
                  <span class="form-item__error" style="display: none;"></span>
                </div>
                <div class="form-btn-box">
                  <button type="button" class="primary-linear dialog-button">
                    <!---->
                    <span>注册</span>
                  </button>
                </div>
                <div class="form-bottom-box">
                  <span class="agree-tips">注册即同意</span>
                  <span class="service-terms pointer">《服务条款》</span>
                  <span class="font-14 f-r go-register-btn pointer">已有账号,前往登录</span>
                </div>
              </form>
            </div>
            <div class="simple-login-box">
              <div class="simple-login-title">
                <span class="text">快速登录</span>
              </div>
              <div class="simple-login-handle">
                <i class="iconfont icon-qq1 login_register-handle-btn"></i>
                <i class="iconfont icon-weixin login_register-handle-btn"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 登录成功提示 -->
        <div class="el-dialog__wrapper" style="display: none;">
          <div
            role="dialog"
            aria-modal="true"
            aria-label="欢迎您来到传智播客高校教辅平台"
            class="el-dialog el-dialog--center"
            style="margin-top: 15vh; width: 30%;"
          >
            <div class="el-dialog__header">
              <span class="el-dialog__title">欢迎您来到传智播客高校教辅平台</span>
              <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                <i class="el-dialog__close el-icon el-icon-close"></i>
              </button>
            </div>
            <!---->
            <!---->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postUserLogin } from "network/teacher";
export default {
  data() {
    return {
      userName: 123,
      password: 123,
    };
  },

  components: {},

  methods: {
    login() {
      postUserLogin(this.userName, this.password).then((res) => {
        console.log(res);

        if (res.code == 0) {
          console.log(res.msg);
          // 将登录之后的token保存在sessionStorage中
          window.sessionStorage.setItem("token", res.data.token);
          this.$router.push("/education");
          this.$message.success("登录成功");
        }
        if (res.code != 0) {
          this.$message.error("登录失败");
        }
      });
    },
    closeLoginDia() {
      this.$emit("close-login", false);
    },
  },
};
</script>

<style scoped>
.login_register-dialog-shade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}
.login_register-dialog-shade .login_register-dialog-box {
  width: 386px;
  min-height: 300px;
  position: relative;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 15vh;
}
.login_register-dialog-shade .login_register-dialog-close-btn {
  font-size: 32px;
  font-weight: 400;
  color: #fff;
  position: absolute;
  top: -60px;
  right: -10px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.login_register-dialog-shade .login_register-dialog-close-btn:hover {
  color: #1251e0;
}

.login_register-dialog-shade .login_register-dialog-content {
  font-size: 14px;
  background-color: #fff;
  border-radius: 4px;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-title-box {
  line-height: 50px;
  height: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #e1e7ec;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #010101;
  letter-spacing: 8px;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-title-box
  .title-text-box {
  background-color: #fff;
}

.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-form-box {
  padding-top: 1px;
}
form {
  display: block;
  margin-top: 0em;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-form-box
  .form-item {
  height: 46px;
  line-height: 46px;
  margin-top: 24px;
  position: relative;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-form-box
  .form-input-box {
  height: 100%;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-form-box
  .form-input-box
  .form-input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 25px;
  background: #eef3f5;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  font-size: 14px;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-content-box {
  padding: 0 31px 31px 31px;
  background-color: #fff;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
button,
input {
  overflow: visible;
}
.login_register-dialog-shade .login_register-dialog-content .form-item__error {
  position: absolute;
  width: auto;
  text-align: left;
  color: #fff;
  background: #dd3232;
  font-size: 12px;
  padding: 4px 15px;
  border-radius: 4px;
  left: 0;
  top: 100%;
  z-index: 10;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .login_register-form-box
  .form-btn-box {
  padding: 30px 0 22px 0;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
.primary-linear {
  background: linear-gradient(325deg, #4aa4ff, #1058fa);
}
.dialog-button {
  width: 100%;
  height: 42px;
  border-radius: 23px;
  border: 0;
  outline: none;
  color: #fff;
  letter-spacing: 10px;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}
.login_register-dialog-shade .login_register-dialog-content .form-bottom-box {
  font-size: 12px;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .form-bottom-box
  .auto-login-btn {
  margin-right: 0;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .form-bottom-box
  .split-symbol {
  display: inline-block;
  width: 1px;
  height: 8px;
  background-color: #010101;
  margin: 0 5px;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .form-bottom-box
  .forget-password-btn {
  cursor: pointer;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .form-bottom-box
  .go-register-btn {
  color: #1058fa;
}

.font-14 {
  font-size: 14px;
}
.pointer {
  cursor: pointer;
}
.f-r {
  float: right;
}
.login_register-dialog-shade .login_register-dialog-content .simple-login-box {
  padding: 34px 7px 0 7px;
  background-color: #fff;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .simple-login-box
  .simple-login-title {
  content: " ";
  width: 100%;
  height: 2px;
  background-color: #e1e7ec;
  position: absolute;
  top: 9px;
  left: 0;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .simple-login-box
  .simple-login-title {
  font-size: 14px;
  color: #010101;
  line-height: 2px;
  height: 2px;
  text-align: center;
  position: relative;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .simple-login-box
  .simple-login-title
  .text {
  padding: 0px 25px;
  background-color: #fff;
  position: relative;
  z-index: 11;
  font-weight: 400;
  letter-spacing: 1px;
}

.login_register-dialog-shade
  .login_register-dialog-content
  .simple-login-box
  .simple-login-handle {
  text-align: center;
  padding-top: 35px;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .simple-login-box
  .simple-login-handle
  .login_register-handle-btn {
  font-size: 36px;
  cursor: pointer;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .simple-login-box
  .simple-login-handle
  .icon-qq1 {
  color: #13b3e3;
  margin-right: 44px;
}
.login_register-dialog-shade
  .login_register-dialog-content
  .simple-login-box
  .simple-login-handle
  .icon-weixin {
  color: #21b301;
}
</style>